<template>
  <div class="program g-bd">
    <div class="main f-fl" v-if="programDetail">
      <div class="detail-wrap clearfix">
        <!-- 歌曲照片 -->
        <div class="cvrwrap f-fl clearfix">
          <div class="u-cover">
            <img alt="" :src="programDetail.coverUrl + '?param=140y140'" />
          </div>
        </div>
        <!-- 歌曲详细内容 -->
        <div class="detail">
          <div class="hd">
            <div class="u-icn2"></div>
            <div class="tit">{{ programDetail.name }}</div>
          </div>
          <!-- 歌手 -->
          <div class="user" v-if="programDetail.dj">
            <i class="u-icn2"></i>
            <span class="name"
              ><a href="">{{ programDetail.dj.brand }}</a></span
            >
            <!-- 订阅 -->
            <a href="javascript:;" class="subscribed-count u-btn2" @click="operationClick"
              ><i
                ><em class="u-icn2"></em>订阅({{ programDetail.radio.subCount | CountFormat }})</i
              ></a
            >
          </div>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div class="tmhi-btn">
        <a
          href="javascript:;"
          class="play u-btn2"
          title="播放"
          @click.prevent="playProgram(programDetail)"
          ><i
            ><em class="icon-play u-btn2"></em>播放 {{ programDetail.duration | songDuration2 }}</i
          ></a
        >
        <a href="javascript:;" class="like u-btn2" title="添加到播放列表" @click="operationClick"
          ><i
            ><em class="icon-like u-btn2"></em>({{ programDetail.commentCount | CountFormat }})</i
          ></a
        >
        <a href="javascript:;" class="comment-count u-btn2 btn2" @click="operationClick"
          ><i>({{ programDetail.commentCount | CountFormat }})</i></a
        >
        <a href="javascript:;" class="share-count u-btn2 btn2" @click="operationClick"
          ><i>({{ programDetail.shareCount | CountFormat }})</i></a
        >
        <a href="javascript:;" class="download u-btn2 btn2" @click="operationClick"><i>下载</i></a>
        <div class="outer-link">
          <i class="u-icn"></i>
          <a href="">生成外链播放器</a>
        </div>
      </div>
      <!-- 描述 -->
      <div class="desc">
        <div class="sub clearfix">
          <span class="title"
            ><router-link
              :to="`/discover/djradio/category?cateId=${programDetail.categoryId}`"
              class="rcmd"
              >音乐推荐</router-link
            ></span
          >
          <span class="brand"
            ><span class="f-thide">{{ programDetail.dj.brand }}</span
            >第{{ programDetail.serialNum }}期</span
          >
          <span class="creattime">{{ programDetail.createTime | createTimeFormat }} 创建</span>
          <span class="listencount"
            >播放: <em>{{ programDetail.listenerCount }}</em
            >次</span
          >
        </div>
        <!-- <p class="txt"><span>介绍：</span><span v-html="programDetail.description"></span></p> -->
        <div class="txt">
          <span class="title">介绍：</span>
          <div class="desc" v-html="programDetail.desc"></div>
          <div class="hidedesc" v-html="programDetail.hidedesc" v-show="descflag"></div>
          <div class="flat" v-if="programDetail.hidedesc">
            <a href="javascript:void(0)" @click="descflag = !descflag"
              >{{ descflag ? '收起' : '展开' }}
              <i class="u-icn" :class="descflag ? 'u-icn-70' : ''"></i
            ></a>
          </div>
        </div>
      </div>
      <!-- 榜单列表 -->
      <div class="tm-list" v-if="programDetail.songs.length !== 0 && programDetail.songs[0].name">
        <!-- 歌曲列表 -->
        <div class="tml-song-list">
          <div class="tmls-wrap">
            <div class="table-hd">
              <div class="title">
                <strong>节目包含歌曲列表</strong> （{{ programDetail.songs.length }}首歌）
              </div>
              <div class="flat">
                <a href="javascript:void(0)" @click="flat = !flat"
                  >{{ flat ? '收起' : '展开' }} <i class="u-icn" :class="flat ? 'u-icn-70' : ''"></i
                ></a>
              </div>
            </div>
            <table v-show="flat">
              <tbody>
                <tr
                  v-for="(item, index) in programDetail.songs"
                  :key="item.id"
                  :class="index % 2 !== 0 ? 'even' : ''"
                >
                  <!-- 排名 -->
                  <td class="tb-hd">
                    <div class="hd">
                      <span class="num">{{ index + 1 }}</span>
                      <div class="ply"><span class="icon"></span></div>
                    </div>
                  </td>
                  <!-- 歌名 -->
                  <td class="title-tb">
                    <div class="dec">
                      <span class="decwrap">
                        <span class="txt"
                          ><router-link :to="`/program?id=${item.id}`">{{
                            item.name
                          }}</router-link></span
                        >
                      </span>
                    </div>
                  </td>
                  <!-- 时长 -->
                  <td class="duration-tb">
                    <span class="dura">{{ item.duration | songDuration }}</span>
                    <div class="opt">
                      <a href="javascript:;" class="u-icn add" title="添加到播放列表"></a>
                      <span class="u-table icn-fav" title="收藏" @click="operationClick"></span>
                      <span class="u-table icn-share" title="分享" @click="operationClick"></span>
                      <span class="u-table icn-dl" title="下载" @click="operationClick"></span>
                    </div>
                  </td>
                  <!-- 播放 -->
                  <td class="artists f-thide">{{ item.artists[0].name }}</td>
                  <!-- 赞 -->
                  <td class="album">{{ item.album.name }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <Comment :id="$route.query.id" :type="4" :hideHot="true"></Comment>
    </div>
    <div class="aside f-fr">
      <div class="download">
        <h3 class="u-hd3">网易云音乐多端下载</h3>
        <ul class="dllist">
          <li><a href="https://itunes.apple.com/cn/app/id590338362" class="ios"></a></li>
          <li><a href="https://music.163.com/api/pc/download/latest" class="pc"></a></li>
          <li><a href="https://music.163.com/api/android/download/latest2" class="aos"></a></li>
        </ul>
        <p>同步歌单，随时畅听320k好音乐</p>
      </div>
      <h3 class="u-hd3">用户wiki</h3>
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo.png" alt="" /> 补充或修改歌曲资料</a
      >
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo1.png" alt="" /> 用户wiki任务中心</a
      >
    </div>
  </div>
</template>

<script>
import Comment from '@/components/Comment/Comment.vue'
import { CountFormat, songDuration, songDuration2, createTimeFormat } from '@/utils/filters.js'
import { operationClick } from '@/utils/methods.js'
export default {
  components: { Comment },
  data() {
    return {
      // 节目详情
      programDetail: false,
      descflag: false,
      flat: true
    }
  },
  methods: {
    operationClick,
    // 获取节目详情
    async getProgramDetail() {
      const { data: res } = await this.$http.get(`/dj/program/detail?id=${this.$route.query.id}`)
      // 处理歌单介绍
      // const { data } = await this.$http.get('/song/detail?ids=' + this.songId)
      const reg = /\n/g
      const desc = res.program.description
      // console.log(desc)
      const descList = desc.split(reg)
      // console.log(descList)

      res.program.desc = descList.slice(0, 10).join('</br>')
      res.program.hidedesc = descList.slice(10).join('</br>')
      this.programDetail = res.program
      // 处理数据缺失的歌曲
      const newsong = []
      this.programDetail.songs.forEach((item, i) => {
        if (item.album) {
          newsong.push(item)
        }
      })
      this.programDetail.songs = newsong
    },
    // 将播放列表替换为榜单列表
    playProgram(program) {
      let tracks = program.mainSong
      tracks.al = tracks.album
      tracks.ar = tracks.artists
      tracks.al.id = tracks.id
      tracks.al.name = tracks.name
      tracks.al.picUrl = program.coverUrl
      tracks.dt = tracks.duration
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    }
  },
  filters: {
    CountFormat,
    songDuration,
    songDuration2,
    createTimeFormat
  },
  created() {
    this.getProgramDetail()
  }
}
</script>

<style lang="less" scoped>
@import url(./Program.less);
</style>
